﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑消费记录</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>会员日志</el-breadcrumb-item>
                <el-breadcrumb-item>消费记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="基本信息" name="info">
                    <div class="tab-content">
                        <el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item label="会员账户" v-if="model.id>0">
                                {{model.userName}}
                            </el-form-item>
                            <el-form-item prop="userId" label="会员账户" v-else>
                                <el-tag type="success" disable-transitions closable effect="dark" @@close="handleSelectClose" v-if="model.userId">{{model.userName}}</el-tag>
                                <el-button size="small" icon="el-icon-plus" @@click="handleOpenDialog">选择...</el-button>
                            </el-form-item>
                            <el-form-item label="操作金额" v-if="model.id>0">
                                {{model.value}}
                            </el-form-item>
                            <el-form-item prop="value" label="操作金额" v-else>
                                <el-input v-model="model.value" placeholder="必填，负数扣减正数增加">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="备注说明" v-if="model.id>0">
                                {{model.remark}}
                            </el-form-item>
                            <el-form-item prop="remark" label="消息内容" v-else>
                                <el-input type="textarea" :rows="5" v-model="model.remark" placeholder="必填，500字符内"></el-input>
                            </el-form-item>
                            <el-form-item label="操作时间" v-if="model.id>0">
                                {{model.addTime}}
                            </el-form-item>
                        </el-form>

                        <el-dialog title="会员列表" :visible.sync="dialogVisible" fullscreen>
                            <div class="search-box" style="margin-bottom:20px">
                                <el-input placeholder="输入关健字" v-model="keyword">
                                    <el-button slot="append" icon="el-icon-search" @@click="listInitData"></el-button>
                                </el-input>
                            </div>
                            <el-card class="table-card">
                                <el-table ref="singleTable" v-loading="loading" :data="listData" highlight-current-row @@current-change="handleSelectChange" class="table-list">
                                    <el-table-column prop="userName" label="用户名" min-width="120"></el-table-column>
                                    <el-table-column prop="groupTitle" label="会员组" width="120"></el-table-column>
                                    <el-table-column prop="amount" label="余额" width="90"></el-table-column>
                                    <el-table-column prop="point" label="积分" width="90"></el-table-column>
                                    <el-table-column label="状态" width="90">
                                        <template slot-scope="scope">
                                            <el-tag size="small" type="success" effect="dark" v-if="scope.row.status==0">正常</el-tag>
                                            <el-tag size="small" type="warning" effect="dark" v-else-if="scope.row.status==1">待验证</el-tag>
                                            <el-tag size="small" type="warning" effect="dark" v-else-if="scope.row.status==2">待审核</el-tag>
                                            <el-tag size="small" type="info" effect="dark" v-else>黑名单</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="regTime" label="注册时间" width="160"></el-table-column>
                                </el-table>
                            </el-card>
                            <div class="pager-box">
                                <el-pagination background
                                               @@size-change="handleSizeChange"
                                               @@current-change="handleCurrentChange"
                                               :current-page="pageIndex"
                                               :page-sizes="[10, 20, 50, 100]"
                                               :page-size="pageSize"
                                               layout="total, sizes, prev, pager, next, jumper"
                                               :total="totalCount">
                                </el-pagination>
                            </div>
                            <div slot="footer" class="dialog-footer">
                                <el-button type="primary" icon="el-icon-edit" @@click="handleConfirm">确 定</el-button>
                                <el-button type="warning" @@click="dialogVisible=false">取 消</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm" v-if="!model.id">确认保存</el-button>
                <el-button plain @@click="resetForm">返回上一页</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script>
        //验证会员ID
        var validateId = function (rule, value, callback) {
            if (!value) {
                callback(new Error('请选择操作的会员'));
            } else {
                callback();
            }
        };
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'info',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                dialogVisible: false,//显示隐藏dialog
                loading: false,
                keyword: '',
                totalCount: 0,
                pageSize: 10,
                pageIndex: 1,
                listData: null,//会员列表
                model: {
                    id: 0,
                    userId: 0,
                    userName: null,
                    value: null,
                    remark: null,
                    addTime: null
                },
                rules: {
                    value: [
                        { required: true, message: '请输入操作金额', trigger: 'blur' },
                        { pattern: /(^-?[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
                    ],
                    remark: [
                        { required: true, message: '请输入备注说明', trigger: 'blur' }
                    ],
                    userId: [
                        { required: true, validator: validateId, trigger: 'blur' }
                    ]
                }
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    let id = GetQueryValue("id"); //获取ID
                    if (id) {
                        AxiosAjax({
                            url: '/member/amount/' + id,
                            loading: true,
                            success: function (res) {
                                //赋值给model
                                Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
                            }
                        });
                    }
                },
                //加载会员列表
                listInitData: function () {
                    let _this = this;
                    let sendUrl = "/member";
                    sendUrl += "?status=0&&pageSize=" + _this.pageSize;
                    sendUrl += "&pageIndex=" + _this.pageIndex;
                    if (_this.keyword.length > 0) {
                        sendUrl += "&keyword=" + encodeURI(_this.keyword);
                    }
                    AxiosAjax({
                        url: sendUrl,
                        beforeSend: function () {
                            _this.loading = true
                        },
                        success: function (res) {
                            _this.listData = res.data;
                            let pageInfo = JSON.parse(res.headers["x-pagination"]);
                            _this.totalCount = pageInfo.totalCount;
                            _this.pageSize = pageInfo.pageSize;
                            _this.pageIndex = pageInfo.pageIndex;
                        },
                        complete: function () {
                            _this.loading = false
                        }
                    });
                },
                //选中表格行
                handleSelectChange: function (val) {
                    if (val) {
                        this.model.userId = val.userId
                        this.model.userName = val.userName
                    }
                },
                //确定选择会员
                handleConfirm: function () {
                    let _this = this; //当前页面
                    //判断是否有父窗体
                    if (typeof (parent.vm) != "undefined") {
                        _this = parent.vm;
                    }
                    if (!this.model.userId) {
                        _this.$alert('请选择操作的会员', '提示', {
                            confirmButtonText: '确定',
                            callback: action => { }
                        });
                    } else {
                        this.dialogVisible = false
                    }
                },
                //取消当前会员
                handleSelectClose() {
                    this.model.userId = 0;
                    this.model.userName = null;
                },
                //每页显示数量
                handleSizeChange: function (val) {
                    if (this.pageSize != val) {
                        this.pageSize = val;
                        this.listInitData();
                    }
                },
                //跳转到第几页
                handleCurrentChange: function (val) {
                    if (this.pageIndex != val) {
                        this.pageIndex = val;
                        this.listInitData();
                    }
                },
                //显示Dialog及加载会员列表
                handleOpenDialog: function () {
                    this.dialogVisible = true
                    this.listInitData()
                },
                //提交表单
                submitForm: function () {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        AxiosAjax({
                            method: 'post',
                            url: '/member/amount',
                            data: _this.model,
                            loading: true,
                            successMsg: '消费记录添加成功',
                            success: function (res) {
                                //重置表单
                                //_this.$refs['editForm'].resetFields();
                                _this.linkUrl('/member/amountlist');
                            }
                        });
                    })
                },
                //跳转链接
                linkUrl: function (url) {
                    window.location.href = url;
                },
                resetForm() {
                    window.history.back(-1);
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>